<template>
  <div class="home_promotions">
    <div class="card_list_box" v-if="activityList?.length > 0">
      <ul class="card_title">
        <li class="title_left">
          <ImgT src="/imgs/home/youhui.webp" alt="" />
          <span>{{ t('home_page_discount_activity') }}</span>
        </li>
        <li class="title_right">
          <p class="more" @click="router.push('/activity')">
            {{ t('home_page_more') }}
          </p>
          <div class="swiper-btn swiper_pre1"
            :class="{ disabled: isPromotionsBeginning || activityList.length === 0 }"
            @click="otherHandlePrev(promotionsRef, 'promotions')">
            <iconpark-icon name="zuo-keyong" size="24" />
          </div>
          <div class="swiper-btn swiper_next1" :class="{ disabled: isPromotionsEnd || activityList.length === 0 }"
            @click="otherHandleNext(promotionsRef, 'promotions')">
            <iconpark-icon name="you-keyong" size="24" />
          </div>
        </li>
      </ul>
      <swiper direction="horizontal" :modules="modules" :loop="false" :navigation="{
        prevEl: '.swiper_pre1',
        nextEl: 'swiper_next1'
        }" @swiper="(e: any) => { promotionsRef = e; updateSwiperStatus('promotions'); }"
        @slideChange="updateSwiperStatus('promotions')">
        <swiper-slide v-for="(items, j) in activityList" :key="j">
          <div class="promotions_list">
            <div class="promotions_list_li" v-for="(item, i) in items" :key="i" @click="router.push({
              path: '/activity',
              query: { id: item }
            })">
              <img :src="t(item.pic_link)" alt="" />
            </div>
          </div>
        </swiper-slide>
      </swiper>
    </div>
  </div>
</template>

<script setup lang='ts'>
import { ref, nextTick, watch, onBeforeMount, onUnmounted } from 'vue';
import pinia from '@/store/index';
import { storeToRefs } from 'pinia';
import { useI18n } from 'vue-i18n';
import { NetPacket } from '@/netBase/NetPacket';
import { i18n } from '@/languages';
import { Swiper, SwiperSlide } from 'swiper/vue';
import { Autoplay, Pagination } from 'swiper/modules';
import { useRouter } from "vue-router";
import 'swiper/css';
import 'swiper/css/pagination' // 轮播图底面的小圆点
import 'swiper/css/pagination'

import H5Websocket from "@/net/Net1";
import { MessageEvent2 } from '@/net/MessageEvent2';
import { NetMsgType } from '@/netBase/NetMsgType';

import { Page } from '@/store/page';
const router = useRouter();
const { t } = useI18n();
const {
  lang,
  activityList,
} = storeToRefs(Page(pinia));


const promotionsRef = ref() // 优惠活动
const isPromotionsBeginning = ref(true)
const isPromotionsEnd = ref(false)

const otherHandlePrev = (item: any, type: string) => {
  if (type === 'promotions' && !isPromotionsBeginning.value && activityList.value.length > 0) {
    item.slidePrev();
    updateSwiperStatus(type);
  }
}
const otherHandleNext = (item: any, type: string) => {
  if (type === 'promotions' && !isPromotionsEnd.value && activityList.value.length > 0) {
    item.slideNext();
    updateSwiperStatus(type);
  }
}
const updateSwiperStatus = (type: string) => {
  nextTick(() => {
    const swiper = type === 'promotions' ? promotionsRef.value : '';
    if (swiper) {
      if (type === 'promotions') {
          isPromotionsBeginning.value = swiper.isBeginning;
          isPromotionsEnd.value = swiper.isEnd;
        }
    }
  });
};

watch(activityList, () => {
  if (promotionsRef.value) {
    updateSwiperStatus('promotions');
  }
});

const modules = [Autoplay, Pagination];

const handleActivetys = async (res: any) => {
  await Page(pinia).setActivityTitleList(res.promo)
};

onBeforeMount(() => {
  i18n.global.locale.value = lang.value

  //获取所有活动
  const req = NetPacket.req_activites();
  req.show = 1

  H5Websocket.sendMessageHandler(req);
  MessageEvent2.addMsgEvent(
    NetMsgType.msgType.msg_notify_activites,
    handleActivetys
  );
})

onUnmounted(() => {
  MessageEvent2.removeMsgEvent(NetMsgType.msgType.msg_notify_activites, null);
})
</script>

<style lang="scss" scoped>
.home_promotions {
  .card_list_box {
    padding-left: 14px;

    .card_title {
        display: flex;
        padding: 0 14px;
        justify-content: space-between;
        align-items: center;
        height: 24px;
        line-height: 24px;
        margin: 12px 0;

        .title_left {
          font-family: PingFang SC;
          font-size: 14px;
          font-weight: 600;
          line-height: 16px;
          text-align: left;
          color: #FCFFFA;
          display: flex;
          justify-content: space-between;
          align-items: center;

          img {
            width: 18px;
            height: 18px;
            margin-right: 5px;
          }
        }

        .title_right {
          font-family: PingFang SC;
          font-size: 12px;
          font-weight: 500;
          line-height: 12px;
          text-align: left;
          color: #C6C4F5;
          display: flex;
          justify-content: space-between;
          align-items: center;

          .more {
            background: #282747;
            margin-left: 8px;
            padding: 8px;
            border-radius: 5px;
            box-shadow: 0.5px 0.5px 1px 0px #4B4A6E inset;
          }

          .swiper-btn {
            margin-left: 8px;
          }

          .disabled {
            pointer-events: none;
            opacity: 0.5;
            cursor: not-allowed;
          }
        }
    }

    .promotions_list {

      height: 162px;
      display: flex;
      flex-wrap: wrap;

      .promotions_list_li {
        width: 169px;
        height: 78px;
        margin-bottom: 8px;
        margin-right: 8px;

        img {
          width: 100%;
          height: 100%;
        }

        .name {
          font-family: YouSheBiaoTiHei;
          font-size: 18px;
          font-weight: 400;
          line-height: 18px;
          color: #FFFFFF;
          z-index: 1;
        }

        .money {
          font-family: PingFang SC;
          font-size: 12px;
          font-weight: 600;
          line-height: 16.8px;
          color: #FDC401;
          z-index: 1;
        }
      }
    }

    .masking_layer {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      backdrop-filter: blur(1px);
      background: rgba(0, 0, 0, 0.6);
      font-family: PingFang SC;
      font-size: 12px;
      font-weight: 500;
      line-height: 18px;
      color: #ffffff;

      .maskin_img {
        width: 32px;
        height: 32px;
        margin-bottom: 8px;
      }
    }
  }
}
</style>
